<template>
  <div>
    <MyPie :data="state.salePie"></MyPie>
    <el-divider />
    <h3 style="text-align: center">全国销量分布图</h3>
    <MyMap :data="state.saleMap"></MyMap>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import { getIndexEchartsApi } from "../../request/api";
import MyPie from "./components/MyPie.vue";
import MyMap from "./components/MyMap.vue";

const state = reactive<{
  salePie: {
    today_money: string;
    name: string;
  }[];
  saleMap: {}[];
}>({
  salePie: [],
  saleMap: [],
});
let { salePie } = toRefs(state);
getIndexEchartsApi().then(res => {
  if (res.errno === 0) {
    console.log(res.data.saleMap);
    state.salePie = res.data.salePie;
    state.saleMap = res.data.saleMap;
  }
});
</script>
<style lang="less" scoped></style>
